<template>
  <div class="app-container">
      <div class="header">
         <el-form :model="queryParams" ref="queryRef" :inline="true">
            <el-form-item prop="serviceId">
               <el-tree-select
                  v-model="queryParams.serviceId"
                  :data="deptTreeData"
                  :props="{ value: 'id', label: 'label', children: 'children' }"
                  :render-after-expand="false"
                  value-key="id"
                  placeholder="请选择服务区"
                  class="with-200"
                  @node-click="handleChange"
               />
            </el-form-item>

            <el-form-item prop="type" class="with-240 date-type">
               <el-segmented v-model="queryParams.type" :options="options" block @change="handleChangeType">
                  <template #default="{ item }">
                     <div>{{ item.label }}</div>
                  </template>
               </el-segmented>
            </el-form-item>

            <el-form-item prop="visitDate" class="with-200" v-show="queryParams.type == 'day'">
               <el-date-picker
                  v-model="queryParams.visitDate"
                  type="date"
                  placeholder="请选择日期"
                  value-format="YYYY-MM-DD"
                  :disabled-date="disabledDate"
               />
            </el-form-item>

            <el-form-item prop="yearMonthStr" class="with-200" v-show="queryParams.type == 'month'">
               <el-date-picker
                  v-model="queryParams.yearMonthStr"
                  type="month"
                  placeholder="请选择月份"
                  value-format="YYYY-MM"
               />
            </el-form-item>

            <el-form-item prop="yearStr" class="with-200" v-show="queryParams.type == 'year'">
               <el-date-picker
                  v-model="queryParams.yearStr"
                  type="year"
                  placeholder="请选择年份"
                  value-format="YYYY"
               />
            </el-form-item>

            <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
         </el-form>
      </div>

      <el-row :gutter="20">
         <el-col :span="20">
            <hot :statisticData="statisticData"></hot>
         </el-col>
         <el-col :span="4">
            <el-descriptions direction="vertical" column="2"  border>
               <template #title>
                  <div class="desc-title">{{queryParams.serviceName}}</div>
               </template>
               <el-descriptions-item label="客流人次">{{ statisticData?.customerNum  || 0}}</el-descriptions-item>
               <el-descriptions-item label="驻足人次">{{ statisticData?.stopCustomerNum || 0 }}</el-descriptions-item>
               <el-descriptions-item label="驻足率">{{ statisticData?.stopRatio || 0 }}</el-descriptions-item>
               <el-descriptions-item label="暂留均时(秒)">{{statisticData?.avgStayOverTime || 0}}</el-descriptions-item>
            </el-descriptions>
         </el-col>
      </el-row>
  </div>
</template>

<script setup>
import { areaHotSpot } from '@/api/bigData/hot'
import hot from "./components/hot.vue";
import useUserStore from '@/store/modules/user'
const { proxy } = getCurrentInstance();
const queryParams = reactive({
    serviceId:"",
    serviceName:"",
    type:"day",
    visitDate:null,
    yearMonthStr:null,
    yearStr:null
});
const statisticData = ref({})
const options = [
   {label:'日',value:'day'},
   {label:'月',value:'month'},
   {label:'年',value:'year'}
]
const deptTreeData = computed(()=>{
   return useUserStore().deptTreeData
})

const resetQuery = ()=> {
   proxy.resetForm("queryRef");
   setDefaultDate()
   handleQuery();
}

const handleQuery = ()=>{
   getList();
}
const disabledDate = (time) =>{
   return time.getTime() > Date.now();
}

const handleChangeType = (val) =>{
   if(val == "day"){
      queryParams.yearMonthStr = null;
      queryParams.yearStr = null;
      queryParams.visitDate = proxy.parseTime(new Date(),'{y}-{m}-{d}');
   }
   else if(val == "month"){
      queryParams.visitDate = null;
      queryParams.yearStr = null;
      queryParams.yearMonthStr = proxy.parseTime(new Date(),'{y}-{m}');
   }
   else if(val == "year"){
      queryParams.visitDate = null;
      queryParams.yearMonthStr = null;
      queryParams.yearStr = proxy.parseTime(new Date(),'{y}');
   }
}

//选择服务区
const handleChange = (item,node) =>{
   queryParams.serviceId = item.id;
   queryParams.serviceName = item.label;
}

const getList = ()=>{
   proxy.$modal.loading("正在加载服务监控数据，请稍候！");
   areaHotSpot(queryParams).then(response => {
      if(response.code == 200){
         const data = response?.data || {};
         statisticData.value = data;
      }
      proxy.$modal.closeLoading();
   }).catch(() => {
      proxy.$modal.closeLoading();
   });
}

const setDefaultDate = () =>{
   queryParams.visitDate = proxy.parseTime(new Date(),'{y}-{m}-{d}');
   queryParams.serviceId  = deptTreeData.value[0]?.children[0]?.children[0]?.children[0]?.id;
   queryParams.serviceName = deptTreeData.value[0]?.children[0]?.children[0]?.children[0]?.label;
}
setDefaultDate();
getList()
</script>
<style lang="scss" scoped>
  .app-container{
   height: calc(100vh - 84px);
   .header{
      display: flex;
      justify-content: space-between;
      .date-type{
         .el-form-item__content{
            width: 100%;
            .is-block{
               width: 100%;
            }
         }
      }
   }
   .el-row{
      height: calc(100% - 50px);
      .desc-title{
         text-align: center;
      }
   }
  }
  
</style>
